<template>
    <div class="app-container">
        <!-- 使用修改密码弹框组件 -->
        <ChangePasswordDialog
            ref="showDialogBtnRef"
        />
        <div class="statistics-section">
            <StatisticsSection/>
            <InspectionTrend/>
        </div>
        <div class="statistics-region">
            <StatisticsRegion/>
            <MapChart/>
            <PatrolStatisticsGreen/>
        </div>
        <div class="statistics-info">
            <DepartmentPoliceSituation/>
            <div class="mb-2"></div>
            <ToDoList/>
            <div class="mb-2"></div>
            <PoliceDynamics/>
            <div class="mb-2"></div>
            <WorkCalendar/>
        </div>
    </div>
</template>

<script setup>
import MapChart from "@/components/Dashboard/MapChart.vue";
import PatrolStatisticsGreen from "@/components/Dashboard/PatrolStatisticsGreen.vue";
import StatisticsRegion from "@/components/Dashboard/StatisticsRegion.vue";
import DepartmentPoliceSituation from "@/components/PoliceAreaChart/DepartmentPoliceSituation.vue";
import ToDoList from "@/components/PoliceAreaChart/ToDoList.vue";
import WorkCalendar from "@/components/PoliceAreaChart/WorkCalendar.vue";
import PoliceDynamics from "@/components/PoliceAreaChart/PoliceDynamics.vue";
import StatisticsSection from "@/components/Dashboard/StatisticsSection.vue";
import InspectionTrend from "@/components/Dashboard/InspectionTrend.vue";


import ChangePasswordDialog from '@/components/ChangePassword/ChangePasswordDialog.vue';
import {PasswordIsOverTime} from "@/api/system/user";

const {proxy} = getCurrentInstance();

const showDialogBtnRef = ref()

const form = ref({})
onMounted(() => {
    PasswordIsOverTime().then(res => {
       if(res.data){
          showDialogBtnRef.value.showDialog()
       }
    })
})

</script>

<style lang="scss">
.app-container {
    .statistics-section {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows:1fr 1fr 1fr;
        gap: var(--gap);

        .statistics-section-item {
            position: relative;
            width: 100%;
            //background: #004d8c;
            height: calc((var(--container-height) * 1 / 3) - var(--gap) * 2);

            --el-card-border-color: var(--el-border-color-light);
            --el-card-border-radius: 4px;
            --el-card-padding: 20px;
            --el-card-bg-color: var(--el-fill-color-blank);
            background-color: var(--el-card-bg-color);
            border: 1px solid var(--el-card-border-color);
            border-radius: var(--el-card-border-radius);
            color: var(--el-text-color-primary);
            overflow: hidden;
            transition: var(--el-transition-duration);
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);

        }
    }

    .statistics-region {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows:0.5fr 3fr 1fr;
        gap: var(--gap);

        .statistics-region-one {
            position: relative;
            width: 100%;
            //height: calc(var(--container-height) * 0.65 / 4.5);
            --el-card-border-color: var(--el-border-color-light);
            --el-card-border-radius: 4px;
            --el-card-padding: 20px;
            --el-card-bg-color: var(--el-fill-color-blank);
            background-color: var(--el-card-bg-color);
            border: 1px solid var(--el-card-border-color);
            border-radius: var(--el-card-border-radius);
            color: var(--el-text-color-primary);
            overflow: hidden;
            transition: var(--el-transition-duration);
            padding: 0 12px;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .statistics-region-two {
            position: relative;
            width: 100%;
            //height: calc(var(--container-height) * 2.5 / 4.5);
            --el-card-border-color: var(--el-border-color-light);
            --el-card-border-radius: 4px;
            --el-card-padding: 20px;
            --el-card-bg-color: var(--el-fill-color-blank);
            background-color: var(--el-card-bg-color);
            border: 1px solid var(--el-card-border-color);
            border-radius: var(--el-card-border-radius);
            color: var(--el-text-color-primary);
            overflow: hidden;
            transition: var(--el-transition-duration);
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
        }

        .statistics-region-three {
            position: relative;
            width: 100%;
            //height: calc(var(--container-height) * 1 / 4.5);
            --el-card-border-color: var(--el-border-color-light);
            --el-card-border-radius: 4px;
            --el-card-padding: 20px;
            --el-card-bg-color: var(--el-fill-color-blank);
            background-color: var(--el-card-bg-color);
            border: 1px solid var(--el-card-border-color);
            border-radius: var(--el-card-border-radius);
            color: var(--el-text-color-primary);
            overflow: hidden;
            transition: var(--el-transition-duration);
            padding: 12px;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
        }
    }

    .statistics-info {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }
}

.el-descriptions__content:not(.is-bordered-label) {
    font-weight: bolder;
}
</style>

<style scoped lang="scss">
.app-container {
    --gap: 10px;
    --container-height: calc(100vh - 114px);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: var(--container-height);
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    //grid-template-columns: 1fr;
    gap: var(--gap);
    padding: 20px !important;
}
</style>
<style scoped>
/* :deep() .el-button{display: none;} */
</style>